import { useState, useEffect, useCallback } from 'react'
import { Table, Select } from 'antd'
import { postCompanyInfoDetailTecProject } from '@/api/companyDetail/CompanyDevelopment.ts'
import { initPageType, usePageChange } from '@hs-admin/utils'
import './ScienceProject.css'

const initPage: initPageType = {
  current: 1,
  pageSize: 10,
  total: 0,
  morePageOptions: {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条数据`,
    pageSizeOptions: [10, 20, 30, 40]
  }
}

const ScienceProject = ({ companyCode }: { companyCode: string }) => {
  const [type, setType] = useState('')
  const typeOptions = [
    { label: '全部', value: '' },
    { label: '国家级', value: '国家级' },
    { label: '省级', value: '省级' }
  ]
  const [data, setData] = useState([])

  const [count, setCount] = useState('')

  const [allDataCount, setAllDataCount] = useState(0)

  const getList = useCallback(
    async (page: number, pageSize: number) => {
      const params = {
        companyCode: companyCode,
        current: page,
        pageSize: pageSize
      }

      if (type) {
        params.itemLevel = type
      }

      const res = await postCompanyInfoDetailTecProject(params)
      setData(res.list ?? [])
      setCount(res.total ?? '')
      if (!type) {
        setAllDataCount(res.total ?? 0)
      }

      return res.total ?? 0
    },
    [companyCode, type]
  )

  const { pagination, resetPageAndTriggerRequest } = usePageChange(initPage, getList)

  useEffect(() => {
    resetPageAndTriggerRequest()
  }, [resetPageAndTriggerRequest])

  const columns = [
    {
      title: '序号',
      width: 80,
      render: (_, __, index) => <span>{index + 1 + (pagination.current - 1) * pagination.pageSize}</span>
    },
    {
      title: '项目等级',
      dataIndex: 'itemLevel',
      render: (value) => <span>{value || '--'}</span>
    },
    {
      title: '项目名称',
      dataIndex: 'itemName',
      render: (value) => <span>{value || '--'}</span>
    },
    {
      title: '项目类别',
      dataIndex: 'itemType',
      render: (value) => <span>{value || '--'}</span>
    },
    {
      title: '承担时间',
      dataIndex: 'reportYear',
      render: (value) => <span>{value || '--'}</span>
    }
  ]

  const showPart = allDataCount > 0

  return (
    <>
      {showPart ? (
        <div id="科技项目" className="scienceProject" data-count={count}>
          <div className="scienceProjectTitle">科技项目</div>
          <div className="select">
            <div className="name">项目等级：</div>
            <Select
              value={type}
              options={typeOptions}
              className="w-100px"
              onChange={(value) => {
                setType(value)
              }}
            />
          </div>
          <Table
            columns={columns}
            dataSource={data}
            pagination={pagination}
            rowKey={(row) => `${row.itemLevel}${row.itemName}${row.itemType}${row.reportYear}`}
          />
        </div>
      ) : null}
    </>
  )
}

export default ScienceProject
